<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- ie 9+ 其他浏览器都不执行，ie8-执行 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <div class="container">
       <form action="" class="form-horizontal">
            
            <div class="form-group">
              
                <label class="col-md-2 control-label">用户名</label>
                <div class="col-md-10">
                    <input type="text" class="form-control">
                </div>

            </div>
            <div class="form-group">
                <label class="control-label col-md-2">密码</label>
                <div class="col-md-10">
                    <input type="password" class="form-control">
                </div>
                
            </div>
            <div class="form-group">
                <label class="control-label col-md-2">留言</label>
                <div class="col-sm-10">
                    <textarea class="form-control" rows="3"></textarea>
                </div>
                </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <input type="checkbox"> 记住密码
                </div>
            </div>
            
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button class="btn btn-primary">登录</button>
                </div>
            </div>
       </form>
       
       <br>
       <br>
       
        <form action="" class="form-inline">
            <div class="form-group">
                <label>用户名</label>
                <input type="text" class="form-control">
               
            </div>
            <div class="form-group">
                <label>电话号码</label>
                <input type="text" class="form-control">
                
            </div>
        <button class="btn btn-info">搜索</button>
            
        </form>
        <br>
        <br>
        
        <form action="" >
            <div class="form-group">
                <input type="text" class="form-control" placeholder="请输入用户名">
                
            </div>
            <div class="form-group">
               
                <input type="password" class="form-control" placeholder="请输入密码">
               
            </div>

            <button class="btn btn-info btn-block">登录</button>
        </form>
        <br>
        <br>
        <form action="" >
            <div class="form-group">
                <label>用户名</label>
                <input type="text" class="form-control">
                <p class="help-block">请输出邮箱、电话号码或者用户名</p>
            </div>
            <div class="form-group">
                <label>密码</label>
                <input type="password" class="form-control">
                <p class="help-block">请输入密码</p>
            </div>

            <!-- <button class="btn btn-primary">登录</button>
            <button class="btn btn-default">注册</button> -->

<!--  -->
            <button class="btn btn-info btn-block">登录</button>
            <button class="btn btn-warning btn-block" disabled>注册</button>
            <button class="btn btn-link pull-right">找回密码</button>

            
            <!-- <button class="btn btn-default">登录</button> -->
            <!-- <button class="btn btn-default">登录</button> -->
            <!-- <button class="btn btn-success">登录</button> -->
            <!-- <button class="btn btn-danger">登录</button> -->
        </form>
        
        <br>
        <br>
        <table class="table table-condensed table-striped table-hover table-bordered">
                <thead>
                <tr class="danger">
                    <td>编号</td>
                    <td>姓名</td>
                    <td>年龄</td>
                    <td>地址</td>
                </tr>
            </thead>
            <tbody>
                <tr class="warning">
                    <td>1001</td>
                    <td>tom</td>
                    <td>12</td>
                    <td>jz</td>
                </tr>
                <tr class="info">
                    <td>1002</td>
                    <td>tom1</td>
                    <td>121</td>
                    <td>开封</td>
                </tr>
                <tr class="success">
                    <td>1003</td>
                    <td>tom</td>
                    <td>122</td>
                    <td>郑州</td>
                </tr>
                <tr class="active">
                    <td>1003</td>
                    <td>tom</td>
                    <td>122</td>
                    <td>郑州</td>
                </tr>
                <tr>
                    <td>1003</td>
                    <td>tom</td>
                    <td>122</td>
                    <td>郑州</td>
                </tr> 
                <tr>
                    <td>1003</td>
                    <td>tom</td>
                    <td>122</td>
                    <td>郑州</td>
                </tr>
            </tbody>
        </table>
    
    

    </div>
    <script src="js/jquery-3.2.1.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <!-- <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> -->
   
</body>
</html>